<section>
  <div class="multiple-select-bg-3" [ngStyle]="data.modalCssStyle | styleFilter">


    <!-- Parent Categories Panel -->
    <div class="multiple-select-left">

      <div class="item-left" [ngClass]="{'item-left-open': it.open}" *ngFor="let it of data.children; " appDebounceClick
        (debounceClick)="itemLeftClick(it,data)">
        <span class="yellow-current" *ngIf="it.open===true"></span>
        <span class="red-dot" *ngIf="it.hasValue"></span>
        {{it.label}}
      </div>

    </div>


    <!--SubClass Categories Panel-->
    <div class="multiple-select-right" [ngClass]="{'multiple-select-right-first': data.current !== data.children[0]}">



      <!-- no subClasses -->
      <ng-container
        *ngIf="data.current?.children?.length > 0&&(!data.current?.children[0].children || data.current?.children[0].children?.length === 0); else hasChildren">

        <div class="row-bg" style="padding-left: 1.25rem;padding-top: 0;margin-bottom: 0.5rem;">

          <div class="row" style="margin-bottom: 1.75rem;" *ngIf="showCheckAll">
            <i [ngClass]="{'nochecked-row': !data.current.checked,'checked-row': data.current.checked}" appDebounceClick
              (debounceClick)="unlimitedAll(data)"></i>
            <span style="flex-grow: 1;">全部</span>
          </div>

          <div class="tag-bg">
            <div class="tag" [ngClass]="{'tag-checked': tag.checked}" appDebounceClick
              (debounceClick)="tagClick(tag,tag,data)" *ngFor="let tag of data.current.children">{{tag.label}}</div>
          </div>

        </div>

      </ng-container>

      <!-- Contain subClasses  -->
      <ng-template #hasChildren>

        <!-- has children-->
        <div class="row-bg" style="padding-left: 1.25rem;padding-top: 0;margin-bottom: 0.5rem;">

          <!--check all-->
          <div class="row" style="margin-bottom: 1.75rem;" *ngIf="showCheckAll">
            <i [ngClass]="{'nochecked-row': !data.current.checked,'checked-row': data.current.checked}" appDebounceClick
              (debounceClick)="unlimitedAll(data)"></i>
            <span style="flex-grow: 1;">全部</span>
          </div>

          <!-- Single SubClass Group-->
          <ng-container *ngFor="let it of data.current?.children">
            <div class="row" style="position: relative;z-index: 2;width: 10rem;">
              <i [ngClass]="{'nochecked-row': !it.checked,'checked-row': it.checked}" appDebounceClick
                (debounceClick)="chooseAll(it,data)"></i>
              <span>{{it.label}}</span>
            </div>

            <Accordion [defaultActiveKey]="defaultActiveKey" style="position: relative;z-index: 1;margin-top: 0.13rem;">
              <AccordionPanel class="customAccorditon" [key]="key" [disabled]="type25Disable" header=" "
                appDebounceClick (debounceClick)="accrodionClick({},$event)">
                <div class="tag-bg" id=it.value *ngIf="it.children && it.children.length >0">

                  <!-- subclass of subclass -->
                  <div class="tag" [ngClass]="{'tag-checked': tag.checked}" appDebounceClick
                    (debounceClick)="tagClick(tag,it,data)" *ngFor="let tag of it.children">{{tag.label}}</div>
                </div>
              </AccordionPanel>
            </Accordion>






          </ng-container>

        </div>
      </ng-template>
    </div>




  </div>
  <div class="footer">
    <p class="del-bg" appDebounceClick (debounceClick)="resetClick()">
      <img class="del-img" src="../assets/img/nav_icon_delete_lj@3x.png" alt="">
      <span class="del-text">重置</span>
    </p>
    <p class="sure-btn" appDebounceClick (debounceClick)="sureClick()">确定</p>
  </div>

</section>